/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="content">
    <div class="previewWrap" v-show="imgData.length>0" @click="showImageView">
      <img :src="imgData[0]">
    </div>
     <transition 
      enter-active-class="animated zoomIn"
      leave-active-class="animated zoomOut">
      <div class="detailPicBox" v-show="imgData.length>0 && show">
        <image-view :imgArr="imgData" 
          :showImageView="true"
          :imageIndex="imageIndex"
          v-on:hideImage="hideImageView">
        </image-view>
        <div style="clear: both"></div>
      </div>
     </transition>
  </div>
</template>

<script>
import imageView from "../../components/ImageView/ImageView";

export default {
  data() {
    return {
      imgData: [
        "../../../static/img/testImage/1.jpeg",
        "../../../static/img/testImage/2.jpeg",
        "../../../static/img/testImage/3.jpeg",
        "../../../static/img/testImage/4.jpeg",
        "../../../static/img/testImage/5.jpeg",
        "../../../static/img/testImage/6.jpeg"
      ], //图片信息
      show: false, //是否显示放大的图片
      imageIndex: 0 //显示第一张放大的图片
    };
  },
  methods: {
    showImageView() {
      this.show = !this.show;
    },
    hideImageView() {
      this.show = false;
    }
  },
  components: {
    "image-view": imageView
  }
};
</script>

<style lang='less' scoped>
.content,
.previewWrap {
  width: 100%;
  height: 100%;
}
.previewWrap {
  border: 1px solid #ccc;
  img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: flex;
  }
}

.detailPicBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 999;
  overflow: hidden;
}
// 动画
.slide-fade-enter-active {
  transition: opacity 0.5s ease;
}

.slide-fade-leave-active {
  transition: opacity 0.5s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  opacity: 0;
}
h1,
h2 {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  margin: 10px auto;
  max-width: 400px;
}
</style>
